<template>
  <div>
    <div v-loading="g_loading" style="margin-top:50px;width: calc(100% - 10px);height:calc(100vh - 140px);">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    </div>
  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph'
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph },
  data() {
    return {
      demoname: '---',
      graphOptions: {
        "backgrounImage": "",
        "backgrounImageNoRepeat": false,
        "layouts": [
          {
            "label": "中心",
            "layoutName": "tree",
            "layoutClassName": "seeks-layout-center",
            "defaultJunctionPoint": "border",
            "defaultNodeShape": 0,
            "defaultLineShape": 1,
            "from": "left",
            "min_per_width": "300",
            "max_per_width": "400"
          }
        ],
        "defaultLineMarker": {
          "markerWidth": 12,
          "markerHeight": 12,
          "refX": 6,
          "refY": 6,
          "data": "M2,2 L10,6 L2,10 L6,6 L2,2"
        },
        "allowShowMiniToolBar": false,
        "allowShowMiniNameFilter": false,
        "defaultNodeShape": 1,
        "defaultNodeWidth": "137",
        "defaultNodeHeight": "37",
        "defaultLineShape": 4,
        "defaultJunctionPoint": "lr",
        "defaultNodeBorderWidth": 0,
        "defaultLineColor": "#df6c6d",
        "defaultNodeFontColor": "#fff",
        "defaultNodeBorderColor": "#67C23A",
        "defaultExpandHolderPosition": "right"
      }
    }
  },
  created() {
  },
  mounted() {
    this.demoname = this.$route.params.demoname
    this.setGraphData()
  },
  methods: {
    setGraphData() {
      var __graph_json_data = {
        "rootId": "a",
        "nodes": [
            {
            "id": "a",
            "text": "a"
            },
            {
            "id": "c",
            "text": "c"
            },
            
            {
            "id": "d",
            "text": "d"
            },
            {
            "id": "d1",
            "text": "d1"
            },
            {
            "id": "d1-1",
            "text": "d1-1"
            },
            {
            "id": "d1-2",
            "text": "d1-2"
            },
            {
            "id": "d1-3",
            "text": "d1-3"
            },
            {
            "id": "d1-4",
            "text": "d1-4"
            },
            {
            "id": "d1-5",
            "text": "d1-5"
            },
            {
            "id": "d1-6",
            "text": "d1-6"
            },
            {
            "id": "d1-7",
            "text": "d1-7"
            },
            {
            "id": "d1-8",
            "text": "d1-8"
            },
            {
            "id": "d2",
            "text": "d2"
            },
            {
            "id": "d2-1",
            "text": "d2-1"
            },
            {
            "id": "d2-2",
            "text": "d2-2"
            },
            {
            "id": "d3",
            "text": "d3"
            },
            {
            "id": "d3-1",
            "text": "d3-1"
            },
            {
            "id": "d3-2",
            "text": "d3-2"
            },
            {
            "id": "d3-3",
            "text": "d3-3"
            },
            {
            "id": "d3-4",
            "text": "d3-4"
            },
            {
            "id": "d3-5",
            "text": "d3-5"
            },
            {
            "id": "d4",
            "text": "d4"
            },
            {
            "id": "d4-1",
            "text": "d4-1"
            },
            {
            "id": "d4-2",
            "text": "d4-2"
            },
            {
            "id": "d4-3",
            "text": "d4-3"
            },
            {
            "id": "d4-4",
            "text": "d4-4"
            },
            {
            "id": "d4-5",
            "text": "d4-5"
            },
            {
            "id": "d4-6",
            "text": "d4-6"
            },
            {
            "id": "e",
            "text": "e"
            },
            {
            "id": "e1",
            "text": "e1"
            },
            {
            "id": "e1-1",
            "text": "e1-1"
            },
            {
            "id": "e1-2",
            "text": "e1-2"
            },
            {
            "id": "e1-3",
            "text": "e1-3"
            },
            {
            "id": "e1-4",
            "text": "e1-4"
            },
            {
            "id": "e1-5",
            "text": "e1-5"
            },
            {
            "id": "e1-6",
            "text": "e1-6"
            },
            {
            "id": "e2",
            "text": "e2"
            },
            {
            "id": "e2-1",
            "text": "e2-1"
            },
            {
            "id": "e2-2",
            "text": "e2-2"
            },
            {
            "id": "e2-3",
            "text": "e2-3"
            },
            {
            "id": "e2-4",
            "text": "e2-4"
            },
            {
            "id": "e2-5",
            "text": "e2-5"
            },
            {
            "id": "e2-6",
            "text": "e2-6"
            },
            {
            "id": "e2-7",
            "text": "e2-7"
            },
            {
            "id": "e2-8",
            "text": "e2-8"
            },
            {
            "id": "e2-9",
            "text": "e2-9"
            }
        ],
        "links": [
            
            {
            "from": "a",
            "to": "c"
            },
            {
            "from": "c",
            "to": "c1"
            },
            {
            "from": "c1",
            "to": "c1-1"
            },
            {
            "from": "c1",
            "to": "c1-2"
            },
            {
            "from": "c1",
            "to": "c1-3"
            },
            {
            "from": "c1",
            "to": "c1-4"
            },
            {
            "from": "c1",
            "to": "c1-5"
            },
            {
            "from": "c1",
            "to": "c1-6"
            },
            {
            "from": "c1",
            "to": "c1-7"
            },
            {
            "from": "c",
            "to": "c2"
            },
            {
            "from": "c2",
            "to": "c2-1"
            },
            {
            "from": "c2",
            "to": "c2-2"
            },
            {
            "from": "c",
            "to": "c3"
            },
            {
            "from": "c3",
            "to": "c3-1"
            },
            {
            "from": "c3",
            "to": "c3-2"
            },
            {
            "from": "c3",
            "to": "c3-3"
            },
            {
            "from": "a",
            "to": "d"
            },
            {
            "from": "d",
            "to": "d1"
            },
            {
            "from": "d1",
            "to": "d1-1"
            },
            {
            "from": "d1",
            "to": "d1-2"
            },
            {
            "from": "d1",
            "to": "d1-3"
            },
            {
            "from": "d1",
            "to": "d1-4"
            },
            {
            "from": "d1",
            "to": "d1-5"
            },
            {
            "from": "d1",
            "to": "d1-6"
            },
            {
            "from": "d1",
            "to": "d1-7"
            },
            {
            "from": "d1",
            "to": "d1-8"
            },
            {
            "from": "d",
            "to": "d2"
            },
            {
            "from": "d2",
            "to": "d2-1"
            },
            {
            "from": "d2",
            "to": "d2-2"
            },
            {
            "from": "d",
            "to": "d3"
            },
            {
            "from": "d3",
            "to": "d3-1"
            },
            {
            "from": "d3",
            "to": "d3-2"
            },
            {
            "from": "d3",
            "to": "d3-3"
            },
            {
            "from": "d3",
            "to": "d3-4"
            },
            {
            "from": "d3",
            "to": "d3-5"
            },
            {
            "from": "d",
            "to": "d4"
            },
            {
            "from": "d4",
            "to": "d4-1"
            },
            {
            "from": "d4",
            "to": "d4-2"
            },
            {
            "from": "d4",
            "to": "d4-3"
            },
            {
            "from": "d4",
            "to": "d4-4"
            },
            {
            "from": "d4",
            "to": "d4-5"
            },
            {
            "from": "d4",
            "to": "d4-6"
            },
            {
            "from": "a",
            "to": "e"
            },
            {
            "from": "e",
            "to": "e1"
            },
            {
            "from": "e1",
            "to": "e1-1"
            },
            {
            "from": "e1",
            "to": "e1-2"
            },
            {
            "from": "e1",
            "to": "e1-3"
            },
            {
            "from": "e1",
            "to": "e1-4"
            },
            {
            "from": "e1",
            "to": "e1-5"
            },
            {
            "from": "e1",
            "to": "e1-6"
            },
            {
            "from": "e",
            "to": "e2"
            },
            {
            "from": "e2",
            "to": "e2-1"
            },
            {
            "from": "e2",
            "to": "e2-2"
            },
            {
            "from": "e2",
            "to": "e2-3"
            },
            {
            "from": "e2",
            "to": "e2-4"
            },
            {
            "from": "e2",
            "to": "e2-5"
            },
            {
            "from": "e2",
            "to": "e2-6"
            },
            {
            "from": "e2",
            "to": "e2-7"
            },
            {
            "from": "e2",
            "to": "e2-8"
            },
            {
            "from": "e2",
            "to": "e2-9"
            }
        ]
        }
        // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置 
       this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
       })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>